<template>
  <el-dialog
    v-model="props.addDialog"
    title="维保转交"
    width="30%"
    :show-close="false"
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <el-form :model="form" ref="formRef">
      <el-form-item label="任务时间段" prop="selectTime">
        <div style="display: flex; width: 80%">
          <el-date-picker
            v-model="form.selectTime"
            type="daterange"
            start-placeholder="请选择开始时间"
            end-placeholder="请选择结束时间"
            style="width: 100%"
            value-format="YYYY-MM-DD"
            @change="dateChange"
          />
        </div>
      </el-form-item>
      <el-form-item
        label="原维保人员"
        prop="originalUserIds"
        :rules="{
          required: true,
          message: '请选择维保人',
          trigger: 'change'
        }"
      >
        <el-select
          v-model="form.originalUserIds"
          filterable
          multiple
          collapse-tags
          collapse-tags-tooltip
          style="width: 80%; margin-right: 15px"
          placeholder="可搜索姓名/下拉选择维保人(可多选)"
          @change="primaryMaintainUserChange"
        >
          <el-option
            v-for="item in primaryMaintainUsers"
            :label="item.maintainUserName"
            :value="item.maintainUser"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="任务转交至"
        prop="transmitName"
        :rules="{
          required: true,
          message: '请选择维保人',
          trigger: 'change'
        }"
      >
        <el-select
          v-model="form.transmitName"
          filterable
          placeholder="可搜索姓名/下拉选择维保人"
          @change="maintainUserChange"
          style="width: 80%; margin-right: 15px"
        >
          <el-option
            v-for="item in maintainUsers"
            :label="item.realName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <div style="display: flex; width: 100%">
          <el-form-item
            label="转交原因"
            style="width: 100%; margin-right: 15px"
            :prop="form.reason"
          >
            <el-input
              v-model="form.reason"
              type="textarea"
              placeholder="请输入原因"
              maxlength="100"
              show-word-limit
              style="width: 100%"
              :rows="3"
            />
          </el-form-item>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel(formRef)">取消</el-button>
        <el-button type="primary" @click="submit(formRef)" :loading="loading">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance } from 'element-plus'
import { ref, watch } from 'vue'
import { maintainTransmit, getMaintainTaskUser } from '/@/api/maintain'
import { getDirectorListApi } from '/@/api/publicApi'
const props = defineProps({
  addDialog: Boolean,
  primaryForm: Object
})
const emit = defineEmits(['addCancel', 'addSubmit'])
const formRef = ref<FormInstance>()
const loading = ref(false)
const formLabelWidth = ref('100px')
const form = ref({
  batchFlag: 1, //是否批量转交;0:否;1:是
  // taskId: '',//任务id
  selectTime: [] as any, //时间
  startTime: '', //开始时间
  endTime: '', //结束时间
  originalUserIds: [] as any, //原处理人id
  originalUserNames: [] as any,
  transmitUserId: '', //新处理人id
  transmitName: '', //新处理人姓名
  reason: '' //原因
})

const dateChange = (val: any) => {
  form.value.startTime = val[0]
  form.value.endTime = val[1]
}

//原维保人
const primaryMaintainUsers = ref<any>([])
const getPrimaryMaintainUsers = () => {
  getMaintainTaskUser().then((res) => {
    if (res.code == 0) {
      primaryMaintainUsers.value = res.data
    }
  })
}
// getPrimaryCheckUsers()
const primaryMaintainUserChange = (val: any) => {
  let arr = [] as any
  val.map((it: any) => {
    primaryMaintainUsers.value.map((item: any) => {
      if (item.maintainUser === it) {
        arr.push(item.maintainUserName)
      }
    })
  })

  form.value.originalUserNames = arr
}

//新维保人
const maintainUsers = ref<any>([])
const getMaintainUser = () => {
  getDirectorListApi(1).then((res) => {
    if (res.code == 0) {
      maintainUsers.value = res.data
    }
  })
}
getMaintainUser()
const maintainUserChange = (val: any) => {
  maintainUsers.value.forEach((i: any) => {
    if (i.id == val) {
      form.value.transmitUserId = i.id
      form.value.transmitName = i.realName
    }
  })
}

const submit = async (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      maintainTransmit(form.value)
        .then((res) => {
          if (res.code == 0) {
            ElMessage.success('转交成功')
            loading.value = false
            form.value = {
              batchFlag: 1, //是否批量转交;0:否;1:是
              // taskId: '',//任务id
              selectTime: [] as any, //时间
              startTime: '', //开始时间
              endTime: '', //结束时间
              originalUserIds: [], //原处理人id
              originalUserNames: [], //原处理人姓名
              transmitUserId: '', //新处理人id
              transmitName: '', //新处理人姓名
              reason: '' //原因
            }
            emit('addSubmit')
          } else {
            loading.value = false
          }
        })
        .catch((res) => {
          loading.value = false
        })
    } else {
      loading.value = false
    }
  })
}

const cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  form.value = {
    batchFlag: 1, //是否批量转交;0:否;1:是
    // taskId: '',//任务id
    selectTime: [] as any, //时间
    startTime: '', //开始时间
    endTime: '', //结束时间
    originalUserIds: [], //原处理人id
    originalUserNames: [], //原处理人姓名
    transmitUserId: '', //新处理人id
    transmitName: '', //新处理人姓名
    reason: '' //原因
  }
  emit('addCancel')
}
watch(
  () => props.addDialog,
  () => {
    getPrimaryMaintainUsers()
  }
)
</script>
<style scoped lang="scss">
.addList {
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>
